<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡效果--动态效果</title>
</head>
<body>
    <!-- SVG -->
    <h1>SVG</h1>
    <div class="svgBox">
    </div>
    <script src="../node_modules/d3/dist/d3.js" charset="utf-8"></script>
    <script type="text/javascript">
        // 准备画布
        let boxWidth = 400;     // 画布宽
        let boxHeight = 300;    // 画布高
        let svg = d3.select('.svgBox')    // 选择文档中的div.svgBox元素
            .append('svg')      // 添加一个svg元素
            .attr('width', boxWidth)    // 设置宽度
            .attr('height', boxHeight)    // 设置高度
            .style('background-color', '#eee')
            .style('border', '1px solid black');

        // 下面将在 SVG 画布里添加三个圆，圆出现之后，立即启动过渡效果。

        // 第一个圆，要求移动 x 坐标。
        svg.append('circle')
            .attr('cx', 10)   // 圆心的x坐标
            .attr('cy', 30)   // 圆心的y坐标
            .attr('r', 10)   // 圆心的半径
            .style('fill', 'green')
            .transition()   // 启动过渡
            .duration(3000)   // 指定过渡持续的时间：3秒
            .ease(d3.easeBounce)   // 过渡的方式：在最终状态处弹跳几次
            .attr('cx', 300);   // 圆心的 x 坐标由10变为300

        // 第二个圆，要求既移动 x 坐标，又改变颜色。
        svg.append('circle')
            .attr('cx', 10)
            .attr('cy', 80)
            .attr('r', 10)
            .style('fill', 'green')
            .transition()   // 启动过渡
            .duration(1500)   // 指定过渡持续的时间：3秒
            .ease(d3.easeBounce)   // 过渡的方式：在最终状态处弹跳几次
            .attr('cx', 300)   // 圆心的 x 坐标由10变为300
            .style('fill', 'red');   // 颜色变为红色

        // 第三个圆，要求既移动 x 坐标，又改变颜色，还改变半径。
        svg.append('circle')
            .attr('cx', 10)
            .attr('cy', 200)
            .attr('r', 10)
            .style('fill', 'green')
            .transition()   // 启动过渡
            .duration(5000)   // 指定过渡持续的时间：3秒
            .ease(d3.easeBounce)   // 过渡的方式：在最终状态处弹跳几次
            .attr('cx', 300)   // 圆心的 x 坐标由10变为300
            .style('fill', 'red')   // 颜色变为红色
            .attr('r', 80);   // 改变圆半径
    </script>
</body>
</html>